<template> 
    <div v-if="visible"  class="overlayPhone flexcen" @click="handleOverlayClick">
      <div class="frame flexcumal">
        <img :src="avatar" style="width: 78px;height: 78px;border-radius: 50%;margin-top: 74px;">
        <div style="font-weight: 500;font-size: 16px;color: #FFFFFF;margin-top: 6px;">姓名</div>
        <div class="cancel-frame flexcen" v-if="cancelTele">呼叫已取消</div>
        <div style="font-weight: 400;font-size: 16px;color: #FFFFFF;margin-top: 33px;margin-bottom:60px" v-else>正在发起语音/视频通话......</div>
        <img :src="require('../../assets/img/popUp/tele-stop.png')" style="width: 61px;height: 61px;border-radius: 50%;" @click="cancelClick">
        <div style="font-weight: 400;font-size: 13px;color: #FFFFFF;margin-top: 18px;">取消</div>
      </div>
    </div>
  </template>
   
  <script>
  export default {
    name: 'telephonePop',
     // 是否显示弹窗
    //  dialogVisibleShow: {
    //        type: Boolean,
    //        default: false
    //    },
    data() {
      return {
        visible: false,
        avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
        cancelTele:false
      };
    },
    watch:{
      
    },
    methods: {
      show() {
        this.visible = true;
        this.cancelTele = false
        console.log('触发了')
      },
      hide() {
        this.visible = false;
      },
      handleOverlayClick() {
        this.$emit('click');
      },
      cancelClick(){
        this.cancelTele = true
        setTimeout(() => {
                this.visible = false
            }, 1000)
      }
    },
  };
  </script>
   
  <style scoped lang="less">
  .overlayPhone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust transparency as needed */
    z-index: 100; /* Ensure it sits on top of other content */

    .frame{
      width: 736px;
      height: 411px;
      background: #272B34;
      border-radius: 24px 24px 24px 24px;
    }
    .cancel-frame{
      margin-top: 29px;
      margin-bottom: 31px;
      width: 214px;
      height: 52px;
      background: #FFFFFF;
      border-radius: 14px 14px 14px 14px;
      border: 2px solid #366EF4;
      font-size: 19px;
      font-weight: 400;
      color: #366EF4;
    }
  }
  </style>